<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>3D旋转球</title>  
    <style>  
    body{
    	background-color: black;
    }
        .main {  
            width: 500px;  
            height: 500px;  
            margin: 20px auto;  
            /*border: 1px solid olivedrab;  */
            position: relative;  
            transform-style: preserve-3d;  
            -webkit-animation: change 20s infinite linear;  
        }  
  
        .ball {  
            height: 500px;  
            width: 500px;  
            position: absolute;  
            top: 50%;  
            left: 50%;  
            margin: -250px 0 0 -250px;  
        }  
  
  
  
        .main div {  
            position: absolute;  
            height: 100%;  
            width: 100%;  
            border: 1px solid white;  
            border-radius: 100%;  
        }  
  
        .x1 {  
            -webkit-transform: rotateY(0deg)  
        }  
  
        .x2 {  
            -webkit-transform: rotateY(30deg)  
        }  
  
        .x3 {  
            -webkit-transform: rotateY(60deg)  
        }  
  
        .x4 {  
            -webkit-transform: rotateY(90deg)  
        }  
  
        .x5 { 
        	 -webkit-transform: rotateY(120deg)  }  
        .x6 {  
            -webkit-transform: rotateY(150deg)  
        }   
  
        @-webkit-keyframes change {  
            0% {  
                transform: rotateZ(-20deg) rotateX(-20deg) rotateY(0deg)  
  
            }  
            100% {  
                transform: rotateZ(-20deg) rotateX(-20deg) rotateY(360deg)  
            }  
        }  
    </style>  
</head>  
<body>  
<div class="ball">  
    <div class="main">  
        <div class="x1"></div>  
        <div class="x2"></div>  
        <div class="x3"></div>  
        <div class="x4"></div>  
        <div class="x5"></div>  
        <div class="x6"></div>  
        <div class="y1"></div>  
        <div class="y2"></div>  
    </div>  
</div>  
</body>  
</html>  